import React from 'react'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import remarkBreaks from 'remark-breaks'
import { cn } from '@/lib/utils'

interface MarkdownRendererProps {
  content: string
  className?: string
}

export function MarkdownRenderer({ content, className }: MarkdownRendererProps) {
  // 预处理内容以确保正确的Markdown格式
  const processedContent = content
    // 处理分隔线：确保前后有换行
    .replace(/([^\n])\s*(-{3,}|={3,}|\*{3,})\s*([^\n])/g, '$1\n\n$2\n\n$3')
    .replace(/([^\n])\s*(-{3,}|={3,}|\*{3,})\s*$/gm, '$1\n\n$2')
    .replace(/^\s*(-{3,}|={3,}|\*{3,})\s*([^\n])/gm, '$1\n\n$2')
    // 处理标题：确保前后有换行
    .replace(/([^\n])\s*(#{1,6}\s+[^\n]*)/g, '$1\n\n$2')
    .replace(/(#{1,6}\s+[^\n]*)\s*([^\n])/g, '$1\n\n$2')
    // 处理列表项：确保前面有换行
    .replace(/([^\n])\s*([\-\*\+]\s+)/g, '$1\n$2')
    // 清理多余的空行
    .replace(/\n{3,}/g, '\n\n')
    .trim()

  return (
    <div className={cn("markdown-content", className)}>
      <ReactMarkdown
        remarkPlugins={[remarkGfm, remarkBreaks]}
        components={{
          // 自定义段落样式 - 简化换行
          p({ node, children, ...props }) {
            return (
              <p className="mb-4 last:mb-0 leading-relaxed text-base" {...props}>
                {children}
              </p>
            )
          },
          // 自定义代码块样式
          code({ node, className, children, ...props }) {
            const isInline = !className?.includes('language-')
            if (isInline) {
              return (
                <code className="bg-muted px-1.5 py-0.5 rounded text-xs font-mono" {...props}>
                  {children}
                </code>
              )
            }
            return (
              <pre className="bg-muted p-3 rounded-lg overflow-x-auto my-3">
                <code className="text-xs font-mono">
                  {children}
                </code>
              </pre>
            )
          },
          // 自定义链接样式
          a({ node, children, ...props }) {
            return (
              <a 
                className="text-primary hover:underline" 
                target="_blank" 
                rel="noopener noreferrer"
                {...props}
              >
                {children}
              </a>
            )
          },
          // 自定义列表样式
          ul({ node, children, ...props }) {
            return (
              <ul className="list-disc list-outside my-2 space-y-1 pl-6" {...props}>
                {children}
              </ul>
            )
          },
          ol({ node, children, ...props }) {
            return (
              <ol className="list-decimal list-outside my-2 space-y-1 pl-6" {...props}>
                {children}
              </ol>
            )
          },
          li({ node, children, ...props }) {
            return (
              <li className="leading-relaxed text-sm mb-1" {...props}>
                {children}
              </li>
            )
          },
          // 自定义标题样式 - 修复解析问题
          h1({ node, children, ...props }) {
            return (
              <h1 className="text-xl font-bold mt-6 mb-4 text-foreground border-b border-border pb-2" {...props}>
                {children}
              </h1>
            )
          },
          h2({ node, children, ...props }) {
            return (
              <h2 className="text-lg font-semibold mt-5 mb-3 text-foreground" {...props}>
                {children}
              </h2>
            )
          },
          h3({ node, children, ...props }) {
            return (
              <h3 className="text-base font-medium mt-4 mb-2 text-foreground" {...props}>
                {children}
              </h3>
            )
          },
          h4({ node, children, ...props }) {
            return (
              <h4 className="text-sm font-medium my-2 text-foreground" {...props}>
                {children}
              </h4>
            )
          },
          h5({ node, children, ...props }) {
            return (
              <h5 className="text-sm font-medium my-2 text-foreground" {...props}>
                {children}
              </h5>
            )
          },
          h6({ node, children, ...props }) {
            return (
              <h6 className="text-xs font-medium my-2 text-foreground" {...props}>
                {children}
              </h6>
            )
          },
          // 自定义分隔线样式
          hr({ node, ...props }) {
            return (
              <hr className="my-6 border-border border-t-2" {...props} />
            )
          },
          // 自定义引用样式
          blockquote({ node, children, ...props }) {
            return (
              <blockquote className="border-l-4 border-primary pl-4 my-3 italic text-muted-foreground" {...props}>
                {children}
              </blockquote>
            )
          },
          // 自定义表格样式
          table({ node, children, ...props }) {
            return (
              <div className="overflow-x-auto my-3">
                <table className="min-w-full border border-border" {...props}>
                  {children}
                </table>
              </div>
            )
          },
          th({ node, children, ...props }) {
            return (
              <th className="border border-border px-3 py-2 bg-muted font-semibold text-left text-xs" {...props}>
                {children}
              </th>
            )
          },
          td({ node, children, ...props }) {
            return (
              <td className="border border-border px-3 py-2 text-xs" {...props}>
                {children}
              </td>
            )
          },
          // 自定义强调样式
          strong({ node, children, ...props }) {
            return (
              <strong className="font-semibold text-foreground" {...props}>
                {children}
              </strong>
            )
          },
          em({ node, children, ...props }) {
            return (
              <em className="italic text-foreground" {...props}>
                {children}
              </em>
            )
          },
          // 自定义删除线样式
          del({ node, children, ...props }) {
            return (
              <del className="line-through text-muted-foreground" {...props}>
                {children}
              </del>
            )
          }
        }}
      >
        {processedContent}
      </ReactMarkdown>
    </div>
  )
}